<script setup lang="ts">
interface Props {
  stateData: {
    avatar: string,
    msg: string,
    msgTime: string
  }[],
}
defineProps<Props>();

const emit = defineEmits(["addState", "deleteState"]);
function addState() {
  emit("addState");
}
function deleteState() {
  emit("deleteState");
}
</script>

<template>
  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="16">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>动态</span>
          <div class="btn-box">
            <span @click="addState">新增动态</span>&nbsp;
            <span @click="deleteState">删除动态</span>
          </div>
        </div>
      </template>
      <div class="state-list" v-if="stateData.length !== 0">
        <div v-for="(item, index) in stateData" :key="index" class="text item">
          <div class="item-avatar">
            <img :src="item.avatar" alt="" />
          </div>
          <div class="item-info">
            <div class="info">{{ item.msg }}</div>
            <div class="info-time">{{ item.msgTime }}</div>
          </div>
        </div>
      </div>
      <el-empty description="暂无动态" v-else />
    </el-card>
  </el-col>
</template>

<style scoped lang="scss">
.card-header {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}

.btn-box {
  span {
    cursor: pointer;
    user-select: none;
  }
}

:deep(.el-card){
  margin-bottom: 24px;
}
:deep(.el-card__header) {
  padding: 16px 24px !important;
}

:deep(.el-card__body) {
  padding: 0 24px 8px !important;
  max-height: calc(100vh - 360px);
  overflow: auto;
}

.state-list {
  .item {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    display: flex;

    &:last-child {
      border-bottom: none;
    }
  }
}

.el-col {
    position: relative;
    max-width: 100%;
    min-height: 1px;
}
.el-col-xs-24 {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
}
@media (min-width: 576px)
{.el-col-sm-24 {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
}}
@media (min-width: 768px)
{.el-col-md-24 {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
}}
@media (min-width: 992px)
{.el-col-lg-24 {
    display: block;
    flex: 0 0 100%;
    max-width: 100%;
}}
@media (min-width: 1200px)
{
  .el-col-xl-16 {
      display: block;
      flex: 0 0 66.66666667%;
      max-width: 66.66666667%;
  }
}

.state-list{
    .item{
        padding: 16px 24px;
        border-bottom: 1px solid rgba(0,0,0,.06);
        display: flex;
        &:last-child{
            border-bottom: none;
        }
  }

  .item-avatar {
    img {
      width: 32px;
      height: 32px;
      margin-right: 16px;
    }
  }

  .item-info {
    flex: 1;

    .info {
      margin-bottom: 4px;
      color: rgba(0, 0, 0, .85);
      font-size: 14px;
      line-height: 1.5715;
    }

    .info-time {
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
      line-height: 1.5715;
    }
  }
}
</style>
